<template>
	<view class="care-record-page">
		<!-- 患者信息卡片 -->
		<view class="patient-card">
			<view class="card-header">
				<text class="patient-name">姓名: {{ patientInfo.name }}</text>
				<view class="status-tag">
					<text class="status-text">{{ patientInfo.status }}</text>
				</view>
			</view>
			
			<view class="card-content">
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">性别:</text>
						<text class="info-value">{{ patientInfo.gender }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">年纪:</text>
						<text class="info-value">{{ patientInfo.age }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">身份证号:</text>
						<text class="info-value">{{ patientInfo.idCard }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">籍贯:</text>
						<text class="info-value">{{ patientInfo.origin }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">婚姻状况:</text>
						<text class="info-value">{{ patientInfo.maritalStatus }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">既往病史:</text>
						<text class="info-value">{{ patientInfo.medicalHistory }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">过敏史:</text>
						<text class="info-value">{{ patientInfo.allergies }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 护理记录列表 -->
		<view class="care-records-section">
			<view class="section-header">
				<view class="title-line"></view>
				<text class="section-title">护理记录</text>
			</view>
			
			<view v-if="loading" class="loading-container">
				<text class="loading-text">加载中...</text>
			</view>
			
			<view v-else-if="careRecords.length === 0" class="empty-container">
				<text class="empty-text">暂无护理记录</text>
			</view>
			
			<view v-else class="timeline">
				<view class="timeline-item" v-for="(record, index) in careRecords" :key="`care-record-${record.id}-${index}`">
					<view class="timeline-date">
						<text class="date-day">{{ record.day }}</text>
						<text class="date-month">{{ record.month }}</text>
					</view>
					
					<view class="timeline-content">
						<view class="record-card">
							<view class="record-header">
								<text class="record-title">{{ record.title }}</text>
								<text class="record-time">{{ record.time }}</text>
							</view>
							
							<view class="record-description">
								<text class="description-text">{{ record.description }}</text>
							</view>
							
							<view class="record-images">
								<view class="image-grid">
									<image 
										class="record-image" 
										v-for="(img, imgIndex) in record.images" 
										:key="imgIndex"
										:src="img"
										mode="aspectFill"
									/>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiGetElderlyDetailRecords } from '@/request/api.js'

export default {
	data() {
		return {
			elderId: '',
			loading: false,
			patientInfo: {
				name: '',
				status: '',
				gender: '',
				age: '',
				idCard: '',
				origin: '',
				maritalStatus: '',
				medicalHistory: '',
				allergies: ''
			},
			careRecords: []
		}
	},
	onLoad(options) {
		if (options.id) {
			this.elderId = options.id;
			this.loadElderlyDetailRecords();
		}
	},
	methods: {
		// 加载老人详情记录
		async loadElderlyDetailRecords() {
			if (this.loading) return;
			
			try {
				this.loading = true;
				
				const requestData = {
					member_id: this.elderId
				};
				
				console.log('加载护理记录，参数:', requestData);
				const response = await apiGetElderlyDetailRecords(requestData);
				console.log('护理记录响应:', response);
				
				if (response.code === 0 && response.data.code === 0) {
					// 设置老人基础信息
					if (response.data.member) {
						this.processElderlyInfo(response.data.member);
					}
					
					// 设置护理记录
					this.careRecords = this.processCareRecords(response.data.data || []);
				} else {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			} catch (error) {
				console.error('加载护理记录失败:', error);
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},
		
		// 处理老人信息数据
		processElderlyInfo(member) {
			this.patientInfo = {
				name: member.name || '未知',
				gender: member.sex === 0 ? '女' : '男',
				age: this.calculateAge(member.birthday),
				idCard: member.id_num || '未填写',
				origin: this.getLocation(member.province, member.city, member.area),
				maritalStatus: this.getMaritalStatus(member.marray),
				medicalHistory: member.history || '无',
				allergies: member.mi_history || '无',
				status: member.status === 1 ? '已入驻' : '未入驻'
			};
		},
		
		// 处理护理记录数据
		processCareRecords(records) {
			return records.map(record => {
				const date = new Date(record.create_time);
				const day = date.getDate().toString().padStart(2, '0');
				const month = `${date.getFullYear()}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
				const time = record.record_time ? new Date(record.record_time).toTimeString().slice(0, 5) : '';
				
				// 处理图片
				let images = [];
				if (record.pics && record.pics.length > 0) {
					record.pics.forEach(pic => {
						if (typeof pic === 'string') {
							// 处理可能包含多个URL的字符串（用|分隔）
							const urls = pic.split('|').filter(url => url.trim());
							images.push(...urls);
						}
					});
				}
				
				return {
					id: record.id,
					day: day,
					month: month,
					title: record.title || '护理记录',
					time: time,
					description: record.remark || '无备注',
					images: images.slice(0, 6) // 最多显示6张图片
				};
			});
		},
		
		// 计算年龄
		calculateAge(birthday) {
			if (!birthday || birthday === '0000-00-00') return '未知';
			const birth = new Date(birthday);
			const today = new Date();
			let age = today.getFullYear() - birth.getFullYear();
			const monthDiff = today.getMonth() - birth.getMonth();
			if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birth.getDate())) {
				age--;
			}
			return age > 0 ? age.toString() : '未知';
		},
		
		// 获取地址信息
		getLocation(province, city, area) {
			const location = [province, city, area].filter(item => item && item.trim()).join('');
			return location || '未填写';
		},
		
		// 获取婚姻状况
		getMaritalStatus(marray) {
			switch (marray) {
				case 1: return '未婚';
				case 2: return '已婚';
				case 3: return '离异';
				case 4: return '丧偶';
				default: return '未知';
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.care-record-page {
	min-height: 100vh;
	background: #F8F8F8;
}

.patient-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.patient-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.status-tag {
	background: #E8F5FF;
	border: 1rpx solid #4CAF50;
	border-radius: 12rpx;
	padding: 8rpx 16rpx;
}

.status-text {
	color: #4CAF50;
	font-size: 24rpx;
}

.info-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.info-item {
	flex: 1;
	min-width: 45%;
	display: flex;
	align-items: center;
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	margin-right: 16rpx;
	min-width: 120rpx;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	font-weight: 500;
	flex: 1;
}

.care-records-section {
	padding: 20rpx;
	padding-left: 140rpx; /* 为左侧时间预留更多空间 */
	position: relative;
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
	padding-left: 0; /* 重置padding，因为父容器已经有了 */
}

.title-line {
	width: 8rpx;
	height: 40rpx;
	background: #E60012;
	border-radius: 4rpx;
	margin-right: 20rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.timeline {
	position: relative;
	padding-left: 0; /* 重置padding，让时间线从父容器的左边距开始 */
}

.timeline::before {
	content: '';
	position: absolute;
	left: -80rpx; /* 调整时间线位置，在时间显示区域的中间 */
	top: 60rpx;
	bottom: 0;
	width: 2rpx;
	background: repeating-linear-gradient(
		to bottom,
		#E0E0E0 0,
		#E0E0E0 8rpx,
		transparent 8rpx,
		transparent 16rpx
	);
}

.timeline-item {
	display: flex;
	margin-bottom: 40rpx;
	position: relative;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -86rpx; /* 调整圆点位置，与时间线对齐 */
	top: 20rpx;
	width: 12rpx;
	height: 12rpx;
	background: #E60012;
	border-radius: 50%;
	z-index: 2;
}

.timeline-date {
	position: absolute;
	left: -140rpx; /* 增加左侧距离，确保时间显示完整 */
	top: 0;
	width: 100rpx; /* 增加宽度，给时间更多显示空间 */
	text-align: center;
	z-index: 1;
}

.date-day {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
	line-height: 1.2;
}

.date-month {
	display: block;
	font-size: 24rpx;
	color: #666666;
	margin-top: 8rpx;
	line-height: 1.2;
	white-space: nowrap; /* 防止月份文字换行 */
}

.timeline-content {
	flex: 1;
	margin-left: 0; /* 去掉左边距，因为父容器已经有足够的左边距 */
}

.record-card {
	background: #FFFFFF;
	border-radius: 16rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	margin-left: 0; /* 去掉左边距，避免卡片被推得太靠右 */
}

.record-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.record-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
}

.record-time {
	font-size: 26rpx;
	color: #666666;
}

.record-description {
	margin-bottom: 20rpx;
}

.description-text {
	font-size: 28rpx;
	color: #666666;
	line-height: 1.5;
}

.record-images {
	margin-top: 20rpx;
}

.image-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.record-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	background: #F0F0F0;
}

/* 加载和空状态样式 */
.loading-container,
.empty-container {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 80rpx 40rpx;
	margin-left: -120rpx; /* 补偿父容器的左边距，让内容居中 */
}

.loading-text,
.empty-text {
	font-size: 28rpx;
	color: #999999;
}

.loading-text {
	color: #666666;
}
</style> 